<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <div class="sidebar">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                router
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                :default-active="'/home/workbench'"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item index="/home/workbench">
                  <el-icon><icon-menu /></el-icon>
                  <span>工作台</span>
                </el-menu-item>
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon><Handbag /></el-icon>
                    <span>商品管理</span>
                  </template>
                  <el-menu-item index="/home/goodslist">商品管理</el-menu-item>
                  <el-menu-item index="1-2">商品分组</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon><Avatar /></el-icon>
                    <span>客户管理</span>
                  </template>
                  <el-menu-item-group title="Group One">
                    <el-menu-item index="2-1">客户查询</el-menu-item>
                    <el-menu-item index="2-2">会员设置</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </div></el-aside
      >
      <el-container>
        <el-header>
          <div class="header">
            <div class="user-box">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <div class="user-img">
                    <img
                      :src="
                        store.state.userInfo.userPic
                          ? store.state.userInfo.userPic
                          : '@/assets/user-img.png'
                      "
                    />
                  </div>
                  {{
                    store.state.userInfo.username
                      ? store.state.userInfo.username
                      : "用户名"
                  }}
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="Postcard" @click="cutSetData"
                      >资料设置</el-dropdown-item
                    >
                    <el-dropdown-item :icon="Key" @click="cutResetPwd">
                      修改密码
                    </el-dropdown-item>
                    <el-dropdown-item @click="quit" :icon="SwitchButton"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
// 导入图标
import {
  Menu as IconMenu,
  Handbag,
  Avatar,
  ArrowDown,
  Postcard,
  Key,
  SwitchButton,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

let store = useStore();
const router = useRouter();

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

// 跳转修改密码页
let cutResetPwd = () => {
  router.push({
    path: "/home/resetpwd",
  });
};

// 跳转修改资料页
let cutSetData = () => {
  router.push({
    path: "/home/setdata",
  });
};

// 退出登录
let quit = () => {
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
  document.cookie = `userAcc=;  expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  document.cookie = `id=;  expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  document.cookie = `token=;  expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  document.cookie = `userPic=;  expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  let obj = {};
  store.commit("getUserInfo", obj);
  ElMessage({
    message: "退出登录成功",
    type: "success",
  });
  router.push({ path: "/" });
};

// 获取用户信息
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100vw;
  .el-aside {
    width: 18vw;
    overflow-x: hidden;
    .sidebar {
      min-height: 100vh;
      height: 100%;
      background-color: #545c64;
      .tac {
        .el-menu {
          width: 18vw;
          border-right: none;
        }
      }
    }
  }
  .el-header {
    padding-right: 0;
    height: 2vmax;
    background-color: #fff;
    border-bottom: 1px solid rgba($color: #666, $alpha: 0.2);
    .header {
      height: 100%;
      .user-box {
        float: right;
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 2vw;
        .el-dropdown-link {
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          .user-img {
            margin-right: 0.5rem;
            img {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  .el-main {
    background-color: rgb(244, 244, 244);
  }
}
</style>
